<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        单行文字垂直居中的原理

        行高 = 上空隙 + 文字本身的高度 + 下空隙


        如果盒子高度设为40 
        
        行高也为40，那么文字的高度+上空隙 + 下空隙就等于40，那么文字就在盒子内居中了

        简单理解:行高的上空隙和下空隙把文字挤到中间了.是如果行高小于盒子高度,文字会偏上如果行高大于盒子高度,则文字偏下

     -->
</body>
</html>